<!-- 这个组件是因为傻逼后端专门用获取设备类型的，垃圾 -->

<template>
	<div class='select-group'>
		<el-select class='item' v-for='(item, index) in values' :style='{width : width}' clearable v-model='values[index]' @change='select($event, index)'>
			<el-option v-for='option in options[index]' :key='option[valueField]' :value='option[valueField]' :label='option[nameField]'></el-option>
		</el-select>
	</div>
</template>

<script>
	import { Request } from '@/utils'
	export default {
		props : {
			all : { //是否要求全选
				type : Boolean,
				default : false
			},
			
			initValues : {
				type : Array,
				default : []
			},
			
			count : {
				type : Number,
				default : 3
			},
			
			url : {
				type : String,
				default : ''
			},
			
			width : {
				type : String,
				default : '200px'
			},
			
			nameField : {
				type : String,
				default : 'name'
			},
			
			valueField : {
				type : String,
				default : 'id'
			},
			
			queryName : {
				type : String,
				default : 'id'
			}
		},
		data () {
			return {
				request : null,
				init : false,
				values : [],
				options : []
			}
		},
		methods : {
			select : function(value, index){
				
				for(let i = index + 1; i < this.count; i ++){
					this.values[i] = ''
					this.options[i].splice(0)
				}
				
				if(value !== '' && index < this.count - 1){
					//this.getChild(value, index + 1)
				}

				this.$emit('select', this.values, index)
				
			},
			
			getChild : function(value = '', index = 0){
				let request = new Request()
				let params = {}
				params[this.queryName] = value
				if(index == 1){
					params[this.queryName] = ''
				}
				request.get(this.url, res => {
					if(res.code == 0 && res.data){
						res.data.forEach(v => {
							this.options[index].push(v)
						})
					}
				}, params)
			}
		},
		
		watch : {
			initValues : function(initValues, oldValues){
				let len = initValues.length
				if(len > 0){
					for(let i = 0; i < len; i ++){
						let v = initValues[i]
						let ov = oldValues[i]
						if(v !== '' && (v !== ov)){
							this.values[i] = v
							this.getChild(v, i + 1)
						}
					}
				}
			}
		},
		
		created () {
			//this.request = new Request()
			for(let i = 0; i < this.count; i ++){
				this.values.push('')
				this.options.push([])
			}
			
			this.getChild()
			
		}
	}
</script>

<style lang='less' scoped>
	.select-group{
		display:inline-block;
		.item{
			display:inline-block;
			margin-left:15px;
			&:first-of-type{
				margin-left:0px;
			}
		}
	}
</style>